<template>
  <view>
    <view class="uni-common-mt">
      <form>
        <view class="uni-uploader-head">
          <view class="uni-uploader-title f-s-12 grey-deep-font-color">点击可预览选好的图片</view>
          <view class="uni-uploader-info">{{imageList.length}}/9</view>
        </view>
        <view class="uni-uploader-body">
          <view class="uni-uploader__files">
            <block v-for="(image,index) in imageList" :key="index">
              <view class="uni-uploader__file" style="position: relative;">
                <view @click="deleteImg(index)"
                  style="position: absolute;top: 0;right: 0;background-color:rgba(0, 0, 0, 0.3);" class="p-all-10">
                  <text class="iconfont icon-shanchu font-color-white f-s-20"></text>
                </view>
                <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
              </view>
            </block>
            <view class="uni-uploader__input-box">
              <view class="uni-uploader__input" @tap="chooseImage"></view>
            </view>
          </view>
        </view>
      </form>
    </view>
  </view>
</template>
<script>
  import permision from "@/common/permission.js"
  var sourceType = [
    ['camera'],
    ['album'],
    ['camera', 'album']
  ]
  var sizeType = [
    ['compressed'],
    ['original'],
    ['compressed', 'original']
  ]
  export default {
    props: {
      list: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        imageList: [],
        countIndex: 8,
        count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
      }
    },
    onReady() {
      this.imageList = this.list
    },
    onUnload() {
      this.imageList = [],
        this.sourceTypeIndex = 2,
        this.sourceType = ['拍照', '相册', '拍照或相册'],
        this.sizeTypeIndex = 2,
        this.sizeType = ['压缩', '原图', '压缩或原图'],
        this.countIndex = 8;
    },
    methods: {
      sourceTypeChange: function(e) {
        this.sourceTypeIndex = parseInt(e.detail.value)
      },
      sizeTypeChange: function(e) {
        this.sizeTypeIndex = parseInt(e.detail.value)
      },
      countChange: function(e) {
        this.countIndex = e.detail.value;
      },
      chooseImage: async function() {
        // #ifdef APP-PLUS
        // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
        if (this.sourceTypeIndex !== 2) {
          let status = await this.checkPermission();
          if (status !== 1) {
            return;
          }
        }
        // #endif

        if (this.imageList.length === 9) {
          let isContinue = await this.isFullImg();
          console.log("是否继续?", isContinue);
          if (!isContinue) {
            return;
          }
        }
        uni.chooseImage({
          sourceType: sourceType[this.sourceTypeIndex],
          sizeType: sizeType[this.sizeTypeIndex],
          count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[
            this.countIndex],
          success: (res) => {
            this.imageList = this.imageList.concat(res.tempFilePaths);
            this.$emit('chooseImg', this.imageList)
          },
          fail: (err) => {
            console.log("err: ", err);
            // #ifdef APP-PLUS
            if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
              this.checkPermission(err.code);
            }
            // #endif
            // #ifdef MP
            if (err.errMsg.indexOf('cancel') !== '-1') {
              return;
            }
            uni.getSetting({
              success: (res) => {
                let authStatus = false;
                switch (this.sourceTypeIndex) {
                  case 0:
                    authStatus = res.authSetting['scope.camera'];
                    break;
                  case 1:
                    authStatus = res.authSetting['scope.album'];
                    break;
                  case 2:
                    authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
                    break;
                  default:
                    break;
                }
                if (!authStatus) {
                  uni.showModal({
                    title: '授权失败',
                    content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                    success: (res) => {
                      if (res.confirm) {
                        uni.openSetting()
                      }
                    }
                  })
                }
              }
            })
            // #endif
          }
        })
      },
      isFullImg: function() {
        return new Promise((res) => {
          uni.showModal({
            content: "已经有9张图片了,是否清空现有图片？",
            success: (e) => {
              if (e.confirm) {
                this.imageList = [];
                res(true);
              } else {
                res(false)
              }
            },
            fail: () => {
              res(false)
            }
          })
        })
      },
      previewImage: function(e) {
        var current = e.target.dataset.src
        uni.previewImage({
          current: current,
          urls: this.imageList
        })
      },
      async checkPermission(code) {
        let type = code ? code - 1 : this.sourceTypeIndex;
        let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
          await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
            'android.permission.READ_EXTERNAL_STORAGE');

        if (status === null || status === 1) {
          status = 1;
        } else {
          uni.showModal({
            content: "没有开启权限",
            confirmText: "设置",
            success: function(res) {
              if (res.confirm) {
                permision.gotoAppSetting();
              }
            }
          })
        }

        return status;
      },
      deleteImg(index) {
        uni.showModal({
          title: '删除图片',
          content: '是否要删除该图片？',
          confirmText: '删除',
          cancelText: '不删除',
          showCancel: true,
          success: res => {
            if (res.confirm) {
              this.imageList.splice(index, 1)
              this.$emit('chooseImg', this.imageList)
            }
          }
        })
      }
    }
  }
</script>

<style>
  .cell-pd {
    padding: 22rpx 30rpx;
  }

  .list-pd {
    margin-top: 50rpx;
  }
</style>